<template>
  <div class="container">
    <div class="header">购票详情</div>
    <div class="price" v-for="(item, index) in priceType" :key="index">
      <span class="iconsize icon icon-lvyou"></span>
      {{ item.name }}
      <div class="children" v-if="item.children">
        <div
          class="price"
          v-for="(innerItem, innerIndex) in item.children"
          :key="innerIndex"
        >
          <span class="iconsize icon icon-lvyoupiaowufuwu"></span>
          {{ innerItem.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailList",
  props: ["priceType"],
  mounted() {
    console.log(this.priceType);
  },
};
</script>
<style lang="stylus" scoped>
.container
  // display flex
  margin-top 0.1rem
  width 100%
  min-height 4rem
  background-color #eeeeee
  .header
    margin  0.2rem 0
    // padding-left 0.2rem
    height 0.44rem
    text-align left
    line-height 0.44rem
    background-color #dddddd

  .price
    padding-left 0.2rem
    line-height 0.45rem
    text-align left


    // background-color pink
    .iconsize
      height 0.45rem
      font-size 0.26rem
      color rgb(39, 136, 194)
      // background-color rgba(50, 163, 151, .7)

    .children
      padding-left 0.2rem
      font-size 0.24rem
</style>